<template>
  <div
    id="app">
    <!--    头部导航栏-->
    <div
      class="header">
      <div
        class="le">
        ×
      </div>
      <ul
        class="nav">
        <li
          v-for="(item,index) in nav"
          :key="index"
          :class="navNum===index?'choose':''"
          @click="navNum=index">
          <router-link
            :to="item.path">
            AI{{
              item.name
            }}
          </router-link>
        </li>
      </ul>
    </div>
    <!--    内容显示-->
    <div
      class="main">
        <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      nav: [{
        path: "/text",
        name: "文本"
      }, {
        path: "/img",
        name: "图片"
      }, {
        path: "/video",
        name: "视频"
      }],
      navNum: 0
    }
  }
}
</script>

<style
  lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  background: linear-gradient(top, #10152e, #340e17);
  color: #fff;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 55px;
    position: relative;

    .le {
      position: absolute;
      top: 0;
      left: 10px;
      width: 35px;
      height: 35px;
      font-size: 35px;
      font-weight: 800;
      cursor: pointer;
    }

    .nav {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 50px;

      li {
        height: 55px;
        text-align: center;
        line-height: 55px;
        padding: 0 15px;
        font-size: 20px;

        a {
          color: #9ea2ac;
        }
      }

      .choose {
        position: relative;

        &:after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 25px;
          width: 35px;
          height: 5px;
          border-radius: 3px;
          background-color: #902031;
        }

        a {
          color: #fff;
        }
      }
    }
  }

  .main {
    width: 100%;
    flex: 1;
  }
}
</style>
